<template>
    <div class="bottom">
        <div :class="bottomToolbarActive==0?'bottom-actvie':'bottom-item'" @click="handleToolbarClick(0)">
            <img src="@/assets/images/toolbar-arrow.png" />
        </div>
        <div :class="bottomToolbarActive==1?'bottom-actvie':'bottom-item'" @click="handleToolbarClick(1)">
            <el-tooltip effect="light" content="场景缩放旋转" placement="top"> <img src="@/assets/images/toolbar-move.png" /></el-tooltip>
        </div>
        <div :class="bottomToolbarActive==7?'bottom-actvie':'bottom-item'" @click="handleToolbarClick(7)">
            <el-tooltip effect="light" content="设备视角缩放旋转" placement="top"> <img src="@/assets/images/toolbar-angle.png" /></el-tooltip>
        </div>
        <div :class="bottomToolbarActive==2?'bottom-actvie':'bottom-item'" @click="handleToolbarClick(2)">
            <el-tooltip effect="light" content="模型大小缩放" placement="top"> <img src="@/assets/images/toolbar-scale.png" /></el-tooltip>
        </div>
        <div :class="bottomToolbarActive==3?'bottom-actvie':'bottom-item'" @click="handleToolbarClick(3)">
            <el-tooltip effect="light" content="模型xyz旋转" placement="top"> <img src="@/assets/images/toolbar-rotate.png" /></el-tooltip>
        </div>
        <div :class="bottomToolbarActive==6?'bottom-actvie':'bottom-item'" @click="handleToolbarClick(6)">
            <el-tooltip effect="light" content="模型xyz位置" placement="top"> <img src="@/assets/images/toolbar-position.png" /></el-tooltip>
        </div>
        <!-- <div draggable="true" @dragstart="handleToolbarDragStart({ type: 'line1'}, $event)" @dragend="handleToolbarDragEnd" :class="bottomToolbarActive==4?'bottom-actvie':'bottom-item'" @click="handleToolbarClick(4)">
                <el-tooltip effect="light" content="拖拽连接线" placement="top"> <img style="user-drag: none; -webkit-user-drag: none;" src="@/assets/images/toolbar-line.png" /></el-tooltip>
            </div> -->
        <div :class="bottomToolbarActive==4?'bottom-actvie':'bottom-item'" @click="handleToolbarClick(4)">
            <el-popover placement="top" :width="370">
                <template #reference>
                    <img style="user-drag: none; -webkit-user-drag: none;" src="@/assets/images/line-white.png" />
                </template>
                <template #default>
                    <div class="line">
                        <div class="item" draggable="true" @dragstart="handleToolbarDragStart({ lineType:1}, $event)" @dragend="handleToolbarDragEnd">
                            <img src="@/assets/images/line-green.png" />
                            <div>信源线</div>
                        </div>
                        <div class="item" draggable="true" @dragstart="handleToolbarDragStart({ lineType:2}, $event)" @dragend="handleToolbarDragEnd">
                            <img src="@/assets/images/line-grey.png" />
                            <div>网线</div>
                        </div>
                        <div class="item" draggable="true" @dragstart="handleToolbarDragStart({ lineType:3}, $event)" @dragend="handleToolbarDragEnd">
                            <img src="@/assets/images/line-blue.png" />
                            <div>电源线</div>
                        </div>
                        <div class="item" draggable="true" @dragstart="handleToolbarDragStart({ lineType:4}, $event)" @dragend="handleToolbarDragEnd">
                            <img src="@/assets/images/line-black.png" />
                            <div>通信线</div>
                        </div>
                        <div class="item" draggable="true" @dragstart="handleToolbarDragStart({ lineType:5}, $event)" @dragend="handleToolbarDragEnd">
                            <img src="@/assets/images/line-purple.png" />
                            <div>采样线</div>
                        </div>
                        <div class="item" draggable="true" @dragstart="handleToolbarDragStart({ lineType:6}, $event)" @dragend="handleToolbarDragEnd">
                            <img src="@/assets/images/line-brown.png" />
                            <div>射频50-3</div>
                        </div>
                        <div class="item" draggable="true" @dragstart="handleToolbarDragStart({ lineType:7}, $event)" @dragend="handleToolbarDragEnd">
                            <img src="@/assets/images/line-brown.png" />
                            <div>射频75-5</div>
                        </div>

                    </div>
                </template>
            </el-popover>
        </div>

        <div :class="bottomToolbarActive==5?'bottom-actvie':'bottom-item'" @click="handleToolbarClick(5)">
            <el-tooltip effect="light" content="删除节点模型" placement="top"> <img src="@/assets/images/toolbar-del.png" />
            </el-tooltip>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import { getCurrentInstance } from 'vue'
const router = useRouter();
const { proxy } = getCurrentInstance();
const rightTabs = defineModel('rightTabs');
const controls = defineModel('controls');
const props = defineProps({
    selectedNode: {
        type: Object,
        default: () => null
    },
    type: {
        type: Number,
        default: 0
    },

})

const emits = defineEmits(['dragStart', 'dragEnd', 'resetHighlight', 'change']);
const bottomToolbarActive = ref(0);
const handleToolbarDragStart = (node, event) => {
    emits('dragStart', node, event)
}

//拖拽结束
const handleToolbarDragEnd = (event) => {
    emits('dragEnd', event)
}
/**
 * 底部工具栏点击事件
 * @param e 
 */
const handleToolbarClick = (e) => {
    switch (e) {
        case 0:
            rightTabs.value = 1
            bottomToolbarActive.value = 0;
            if (props.type == 0) {
                controls.value.enableRotate = false; // 禁止旋转
                controls.value.enableZoom = false;   // 禁止缩放
            } else {
                controls.value.enableRotate = true; // 禁止旋转
                controls.value.enableZoom = true;   // 禁止缩放
            }
            break;
        case 1:
            //摄像机
            rightTabs.value = 1
            bottomToolbarActive.value = 1;
            controls.value.enableRotate = true; // 禁止旋转
            controls.value.enableZoom = true;   // 禁止缩放       
            controls.value.target.set(0, 0, 0);
            break;

        case 7:
            //摄像机
            rightTabs.value = 1
            bottomToolbarActive.value = 7;
            controls.value.enableRotate = true; // 
            controls.value.enableZoom = true;   //     
            if (props.selectedNode?.meshRef) {
                controls.value.target.copy(props.selectedNode.meshRef.position); //         
            }
            break;
        case 2:
            //缩放
            if (props.selectedNode?.meshRef) {
                rightTabs.value = 0
                bottomToolbarActive.value = 2;
                controls.value.enableRotate = false; // 禁止旋转
                controls.enableZoom = false;   // 禁止缩放

            }
            break;
        case 3:
            //旋转
            if (props.selectedNode?.meshRef) {
                rightTabs.value = 0
                bottomToolbarActive.value = 3;
                controls.value.enableRotate = false; // 禁止旋转
                controls.value.enableZoom = false;   // 禁止缩放
            }
            break;
        case 4:
            //线
            rightTabs.value = 0
            bottomToolbarActive.value = 4;
            if (props.type == 0) {
                controls.value.enableRotate = false; // 禁止旋转
                controls.value.enableZoom = false;   // 禁止缩放

                //   controls.value.target.set(   0, 0, 0);
            } else {
                controls.value.enableRotate = true; // 禁止旋转
                controls.value.enableZoom = true;   // 禁止缩放
            }
            emits('change', 4);

            break;
        case 5:
            //删除
            rightTabs.value = 1
            bottomToolbarActive.value = 5;
            controls.value.enableRotate = false; // 禁止旋转
            controls.value.enableZoom = false;   // 禁止缩放
            break;
        case 6:
            //位置
            if (props.selectedNode?.meshRef) {
                rightTabs.value = 0
                bottomToolbarActive.value = 6;
                controls.value.enableRotate = false; // 禁止旋转
                controls.value.enableZoom = false;   // 禁止缩放
            }

            break;
    }
}
defineExpose({ bottomToolbarActive, handleToolbarClick });
</script>

<style scoped lang="scss">
.line {
    display: flex;
    gap: 12px;
    .item {
        // width: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        // margin: 0 10px;
        justify-content: center;
        img {
            width: 30px;
            height: 30px;
            user-drag: none;
            -webkit-user-drag: none;
        }
        div {
            font-size: 12px;
            color: #333;
        }
    }
}
.bottom {
    position: absolute;
    bottom: 18px;
    left: calc(50% - 240px);
    z-index: 100;
    width: 480px;
    height: 60px;
    border-radius: 14px;
    background: rgba(0, 17, 46, 0.3);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 30px;
    &-item {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            width: 22px;
            height: 22px;
        }
        &:hover {
            border-radius: 6px;
            background: #23446f;
        }
        &:active {
            border-radius: 6px;
            background: #3670f7;
        }
    }
    &-actvie {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        background: #3670f7;
        img {
            width: 22px;
            height: 22px;
        }
    }
}
</style>